<!--  -->
<template>
  <div style="display: flex; justify-content: space-between">
    <a-form size="small" :model="form" layout="inline">
      <!-- <a-form-item label="员工工号" label-col-flex="80px">
                <a-input allow-clear :style="{ width: '180px' }" class="bacClass" placeholder=""
                    v-model="form.donateProject" />
            </a-form-item>
            <a-form-item label="员工姓名" label-col-flex="80px">
                <a-input allow-clear :style="{ width: '180px' }" class="bacClass" placeholder=""
                    v-model="form.donateProject" />
            </a-form-item> -->
      <CorporateSectorCascader
        ref="cascaderRef"
        :configCascader="configCascader"
        @changeCascader="changeCascader"
      />
      <a-form-item label="日期" label-col-flex="80px">
        <a-range-picker
          popup-container="html"
          class="bacClass"
          @select="onSelect"
          style="width: 300px"
          @clear="onClear"
        />
      </a-form-item>
    </a-form>
    <Toolbar
      :items="tabTtpe == 1 ? ['查询', '新增', '删除', '审核'] : ['查询']"
      @select="cx"
      @add="adds"
      @del="delSles"
      @audit="auditss"
    >
    </Toolbar>
  </div>
  <div class="gang"></div>
  <a-tabs :lazy-load="true" type="card" @change="tabsChange" justify>
    <a-tab-pane title="未审核" :key="1">
      <div class="cssTable" style="height: 100%">
        <a-spin
          :loading="form.pageLoading"
          tip="加载中"
          dot
          style="height: 100%; width: 100%; z-index: 999"
        >
          <AgGridVuesCopys
            :rowHeight="33"
            :headerHeight="33"
            :suppressCopyRowsToClipboard="true"
            :suppressDragLeaveHidesColumns="true"
            rowSelection="multiple"
            @grid-ready="gridReady"
            style="height: calc(100% - 100px)"
            :defaultColDef="defaultColDef"
            class="ag-theme-alpine"
            :rowData="dataList"
            :columnDefs="tc"
            :localeText="localeText1"
          ></AgGridVuesCopys>
          <paginationCopys
            :page-size-options="pagingList1"
            :total="total"
            show-total
            show-jumper
            show-page-size
            @change="PageSize"
            @page-size-change="change1"
            style="justify-content: center"
            :page-size="size"
            :current="page"
          />
        </a-spin>
      </div>
    </a-tab-pane>
    <a-tab-pane title="已审核" :key="2">
      <div class="cssTable" style="height: 100%">
        <a-spin
          :loading="form.pageLoading"
          tip="加载中"
          dot
          style="height: 100%; width: 100%; z-index: 999"
        >
          <AgGridVuesCopys
            :rowHeight="33"
            :headerHeight="33"
            :suppressCopyRowsToClipboard="true"
            :suppressDragLeaveHidesColumns="true"
            rowSelection="multiple"
            @grid-ready="gridReady2"
            style="height: calc(100% - 100px)"
            :defaultColDef="defaultColDef"
            class="ag-theme-alpine"
            :rowData="dataLists"
            :columnDefs="tc2s"
            :localeText="localeText1"
          ></AgGridVuesCopys>
          <paginationCopys
            :page-size-options="pagingList1"
            :total="total2"
            show-total
            show-jumper
            show-page-size
            @change="PageSize2"
            @page-size-change="change12"
            style="justify-content: center"
            :page-size="size2"
            :current="page2"
          />
        </a-spin>
      </div>
    </a-tab-pane>
  </a-tabs>
  <a-drawer
    style="z-index: 999"
    :drawer-style="{ zIndex: 9999 }"
    :mask-closable="false"
    :visible="pageData.showAdd"
    unmountOnClose
    placement="bottom"
    popup-container=".arco-tabs-content"
    height="550"
    :closable="false"
    v-loading="loadings"
  >
    <template #title>
      {{ pageData.sideTitle }}
    </template>
    <template #footer>
      <a-button @click="pageData.showAdd = false">关闭</a-button>
      <a-button
        :loading="loadings"
        @click="sideOk"
        type="primary"
        v-if="pageData.sideTitle != '乐捐单明细'"
        >保存</a-button
      >
    </template>
    <div>
      <a-form
        ref="formRef"
        layout="horizontal"
        :model="dataForm"
        size="mini"
        v-if="pageData.sideTitle != '乐捐单明细'"
      >
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label-col-flex="80px" label="乐捐单号" field="donateCode">
              <a-input
                class="bacClass"
                placeholder="自动生成"
                v-model="dataForm.donateCode"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item
              label-col-flex="80px"
              label="乐捐日期"
              field="donateDate"
              :rules="[{ required: true, message: '乐捐日期必填' }]"
              :validate-trigger="['change', 'blur']"
            >
              <a-date-picker
                popup-container="html"
                class="bacClass"
                v-model="dataForm.donateDate"
                style="width: 300px"
                :disabled="pageData.sideTitle == '乐捐单明细'"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item
              label-col-flex="80px"
              label="乐捐类型"
              field="donateType"
              :rules="[{ required: true, message: '乐捐类型必填' }]"
              :validate-trigger="['change', 'blur']"
            >
              <a-select
                popup-container="html"
                class="bacClass"
                allow-clear
                v-model="dataForm.donateType"
                @click="ljlxClick"
                :disabled="pageData.sideTitle == '乐捐单明细'"
              >
                <a-option v-for="item in ljlxList" :value="item.typeName">{{
                  item.typeName
                }}</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item
              label-col-flex="80px"
              label="公司"
              field="companyName"
              :rules="[{ required: true, message: '公司必填' }]"
              :validate-trigger="['change', 'blur']"
            >
              <a-input class="bacClass" placeholder="" v-model="dataForm.companyName" disabled />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item label-col-flex="80px" label="备注" field="remark">
              <a-input
                class="bacClass"
                placeholder=""
                v-model="dataForm.remark"
                :disabled="pageData.sideTitle == '乐捐单明细'"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-space>
      <a-button
        type="primary"
        size="mini"
        @click="xzClicks"
        v-if="pageData.sideTitle != '乐捐单明细'"
        >新增</a-button
      >
      <a-button
        type="primary"
        size="mini"
        @click="mxDelet"
        v-if="pageData.sideTitle != '乐捐单明细'"
        >删除</a-button
      >
    </a-space>
    <!-- <a-table row-key="userId" :columns="columnsTable" :data="dataListmx"
      :row-selection="{ type: 'checkbox', showCheckedAll: true }" v-model:selectedKeys="selectedKeys" :pagination="false"
      size="small" :bordered="{ cell: true }" v-if="pageData.sideTitle != '乐捐单明细'">
      <template #donateNum="{ record }">
        <a-input-number class="bacClass" v-model="record.donateNum" :precision="2" @change="ainNumber(record)" />
      </template>
      <template #donateAmount="{ record }">
        {{
          Number(record.donateNum * record.donatePrice).toFixed(2) != 'NaN'
          ? Number(record.donateNum * record.donatePrice).toFixed(2)
          : Number(0).toFixed(2)
        }}
      </template>
      <template #donatePrice="{ record }">
        <a-input-number class="bacClass" v-model="record.donatePrice" :precision="2" @change="ainNumber(record)" />
      </template>
    </a-table>
    <a-table row-key="userId" :columns="columnsTables" :data="dataListmx"
      :row-selection="{ type: 'checkbox', showCheckedAll: true }" v-model:selectedKeys="selectedKeys" :pagination="false"
      size="small" :bordered="{ cell: true }" v-else>
      <template #confirmState="{ record }">
        <a-tag color="green" v-if="record.confirmState == 0">未确认</a-tag>
        <a-tag color="#45a769" v-else>已确认</a-tag>
      </template>
    </a-table> -->
    <AgGridVuesCopys
      :rowHeight="33"
      :headerHeight="33"
      :suppressCopyRowsToClipboard="true"
      rowSelection="multiple"
      style="height: 100%"
      :defaultColDef="defaultColDef"
      class="ag-theme-alpine"
      @grid-ready="gridReady2wf"
      :rowData="dataListmx"
      :localeText="localeText1"
      :columnDefs="tc1"
      v-if="pageData.sideTitle != '乐捐单明细'"
    >
    </AgGridVuesCopys>
    <AgGridVuesCopys
      :rowHeight="33"
      :headerHeight="33"
      :suppressCopyRowsToClipboard="true"
      rowSelection="multiple"
      style="height: 100%"
      :defaultColDef="defaultColDef"
      class="ag-theme-alpine"
      @grid-ready="gridReady2wfs"
      :rowData="dataListmx"
      :localeText="localeText1"
      :columnDefs="tc2"
      v-else
    >
    </AgGridVuesCopys>
  </a-drawer>
  <a-modal v-model:visible="visible" @ok="handleOk" @cancel="visible = false" fullscreen>
    <template #title> 员工明细 </template>
    <div style="width: 100%; display: flex; justify-content: space-between; margin-bottom: 10px">
      <div>
        <a-form
        ref="formRef2"
        layout="horizontal"
        :model="form"
      >
        <a-form-item
          size="small"
          label-col-flex="80px"
          label="部门"
          field="cascaderId"
          :rules="[{ required: true, message: '部门必填' }]"
          :validate-trigger="['change', 'blur']"
        >
          <a-cascader
            ref="cascaders"
            v-model="form.cascaderId"
            class="bacClass"
            size="small"
            :options="options"
            :style="{ width: '200px' }"
            placeholder=""
            @click="bmClick"
            allow-clear
            popup-container="html"
          />
        </a-form-item>
       </a-form>
      </div>
      <div> <a-button type="primary" size="small" @click="mxSelect">查询</a-button></div>
    </div>
    <AgGridVuesCopys
      :rowHeight="33"
      :headerHeight="33"
      :suppressCopyRowsToClipboard="true"
      rowSelection="multiple"
      style="height: 75vh"
      :defaultColDef="defaultColDef"
      class="ag-theme-alpine"
      @grid-ready="gridReady2wfss"
      :rowData="dataListmx2"
      :localeText="localeText1"
      :columnDefs="tc3"
    >
    </AgGridVuesCopys>
  </a-modal>
  <a-drawer
    style="z-index: 999"
    :drawer-style="{ zIndex: 9999 }"
    :mask-closable="false"
    :visible="DDSVister"
    unmountOnClose
    placement="bottom"
    popup-container=".arco-tabs-content"
    height="550"
    :closable="false"
  >
    <template #title> 疵点明细 </template>
    <template #footer>
      <a-button @click="DDSVister = false">关闭</a-button>
    </template>
    <AgGridVuesCopys
      :rowHeight="33"
      :headerHeight="33"
      :suppressCopyRowsToClipboard="true"
      rowSelection="multiple"
      style="height: 100%"
      :defaultColDef="defaultColDef"
      class="ag-theme-alpine"
      :rowData="CloumsDDSList"
      :localeText="localeText1"
      :columnDefs="tableCloumsDDS"
    >
    </AgGridVuesCopys>
  </a-drawer>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import { post, get } from '@/api/http'
import { Message, Modal } from '@arco-design/web-vue'

import { localeText } from '@/api/aggridZw'
import { pagingList } from '@/api/paging'
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
import { slicing } from '@/utils/caseFrimAndSecRig'
import dayjs from 'dayjs'

const pagingList1: any = ref(pagingList)
const localeText1: any = ref(localeText)

const loadings = ref(false)

const tabTtpe = ref(1)

const tabsChange = (e) => {
  if (e == 1) {
    doRefresh()
  } else {
    doRefresh2()
  }
  tabTtpe.value = e
}

const form: any = reactive({
  donateProject: '',
  cascaderId:null
})

const defaultColDef: any = {
  sortable: true,
  resizable: true,
  filter: true,
}
const gridOption = ref()
const colState = ref()
const gridReady = (params: any) => {
  gridOption.value = params.api
  colState.value = params.columnApi
}

const gridOption2 = ref()
const gridReady2 = (params: any) => {
  gridOption2.value = params.api
}

const gridOption2wf = ref()
const gridReady2wf = (params: any) => {
  gridOption2wf.value = params.api
}

const gridOption2wfs = ref()
const gridReady2wfs = (params: any) => {
  gridOption2wfs.value = params.api
}

const gridOption2wfss = ref()
const gridReady2wfss = (params: any) => {
  gridOption2wfss.value = params.api
}

const total = ref(0)
const page = ref(1)
const size = ref(10)
function PageSize(val: any) {
  page.value = val
  doRefresh()
}
function change1(val: any) {
  size.value = val
  doRefresh()
}

const total2 = ref(0)
const page2 = ref(1)
const size2 = ref(10)
function PageSize2(val: any) {
  page2.value = val
  doRefresh2()
}
function change12(val: any) {
  size2.value = val
  doRefresh2()
}

const dataList: any = ref([])
const dataLists: any = ref([])

function doRefresh() {
  form.pageLoading = true
  post({
    url: 'pieceData/DonateRecord/getPage',
    data: {
      page: page.value,
      size: size.value,
      auditState: 0,
      beginDate: form.beginDate,
      endDate: form.endDate,
      companyId: form.companyId,
    },
  })
    .then(({ data, code }: any) => {
      if (code === 200) {
        setTimeout(() => {
          dataList.value = data.list
          gridOption.value.setRowData(data.list)
        }, 0)
        total.value = data.total
      }
    })
    .catch(console.log)
    .finally(() => {
      form.pageLoading = false
    })
}

function doRefresh2() {
  form.pageLoading = true
  post({
    url: 'pieceData/DonateRecord/getPage',
    data: {
      page: page.value,
      size: size.value,
      auditState: 1,
      beginDate: form.beginDate,
      endDate: form.endDate,
      companyId: form.companyId,
    },
  })
    .then(({ data, code }: any) => {
      if (code === 200) {
        setTimeout(() => {
          dataLists.value = data.list
          gridOption2.value.setRowData(data.list)
        }, 0)
        total.value = data.total
      }
    })
    .catch(console.log)
    .finally(() => {
      form.pageLoading = false
    })
}

const cx = () => {
  if (tabTtpe.value == 1) {
    page.value = 1
    doRefresh()
  } else {
    page2.value = 1
    doRefresh2()
  }
}

onMounted(() => {
  if (tabTtpe.value == 1) {
    doRefresh()
  } else {
    doRefresh2()
  }
  pageData.rHeight = document.getElementsByClassName('main-section')[0]?.clientHeight
  //弹出层的高
  if (pageData.rHeight !== undefined) {
    pageData.rHeight = pageData.rHeight
  }
  doRefresh()
})
const pageData: any = reactive({
  showAdd: false,
  rHeight: 0,
  sideTitle: '新增',
})

const dataForm: any = reactive({
  donateCode: '',
  donateDate: '',
  donateType: '',
  companyId: '',
  companyName: '',
  remark: '',
})

const tableColumns: any = [
  {
    title: '乐捐单号',
    key: 'donateCode',
    dataIndex: 'donateCode',
    width: 150,
  },
  {
    title: '日期',
    key: 'donateDate',
    dataIndex: 'donateDate',
    width: 150,
  },
  {
    title: '公司',
    key: 'companyName',
    dataIndex: 'companyName',
    width: 150,
  },
  {
    title: '乐捐类型',
    key: 'donateType',
    dataIndex: 'donateType',
    width: 150,
  },
  {
    title: '计划单号',
    key: 'planOrderCode',
    dataIndex: 'planOrderCode',
    width: 150,
  },
  {
    title: '机台号',
    key: 'machineCode',
    dataIndex: 'machineCode',
    width: 150,
  },
  {
    title: '匹号',
    key: 'horseNo',
    dataIndex: 'horseNo',
    width: 150,
  },
  {
    title: '条码号',
    key: 'clothfiyCode',
    dataIndex: 'clothfiyCode',
    width: 150,
  },
  {
    title: '关联单号',
    key: 'associatCode',
    dataIndex: 'associatCode',
    width: 150,
  },
  {
    title: '乐捐总数量',
    key: 'totalNum',
    dataIndex: 'totalNum',
    width: 150,
  },
  {
    title: '乐捐金额',
    key: 'amount',
    dataIndex: 'amount',
    width: 150,
  },
  {
    title: '一维码',
    key: 'barCode',
    dataIndex: 'barCode',
    width: 150,
  },
  {
    title: '创建人',
    key: 'createName',
    dataIndex: 'createName',
    width: 150,
  },
  {
    title: '创建时间',
    key: 'createTime',
    dataIndex: 'createTime',
    width: 150,
  },
  {
    title: '修改人',
    key: 'updateName',
    dataIndex: 'updateName',
    width: 150,
  },
  {
    title: '修改时间',
    key: 'updateTime',
    dataIndex: 'updateTime',
    width: 150,
  },
  {
    title: '是否自动生成',
    key: 'autoState',
    dataIndex: 'autoState',
    width: 150,
    fixed: 'right',
  },
  {
    title: '审核状态',
    key: 'auditState',
    dataIndex: 'auditState',
    width: 150,
    fixed: 'right',
  },
  {
    title: '操作',
    key: 'alites',
    dataIndex: 'alites',
    slotName: 'alites',
    width: 80,
    fixed: 'right',
  },
]

let tc: any[] = tableColumns.map((o: any) => {
  let obj = {
    headerName: o.title,
    field: o.key,
    pinned: o['fixed'],
  }
  if (o.key === 'alites') {
    obj['resizable'] = false
    obj['filter'] = false
    obj['sortable'] = false
    obj['lockPosition'] = 'right'
    obj['width'] = 150
    obj['cellRenderer'] = {
      template: `<a-space>
                <el-button v-if="taval == 1 && params.data.autoState == 1" style="color:#165dff;" link @click="a1" >修改</el-button>
                       <el-button style="color:#165dff;" link @click="a2" >明细</el-button>
                       <el-button style="color:#165dff;" link @click="a3" >疵点明细</el-button>
                </a-space>`,
      setup(props: any) {
        const a1 = () => {
          for (let item in props.params.data) {
            dataForm[item] = props.params.data[item]
          }
          post({
            url: '/pieceData/DonateRecordDetail/getList',
            data: {
              donateRecordId: props.params.data.id,
            },
          }).then(({ data }) => {
            dataListmx.value = data
            setTimeout(() => {
              gridOption2wf?.value.setRowData(data)
            }, 0)
            pageData.showAdd = true
            pageData.sideTitle = '修改乐捐单'
          })
        }
        const a2 = () => {
          for (let item in props.params.data) {
            dataForm[item] = props.params.data[item]
          }
          post({
            url: '/pieceData/DonateRecordDetail/getList',
            data: {
              donateRecordId: props.params.data.id,
            },
          }).then(({ data }) => {
            dataListmx.value = data
            setTimeout(() => {
              gridOption2wfs.value.setRowData(data)
            }, 0)
            pageData.showAdd = true
            pageData.sideTitle = '乐捐单明细'
          })
        }
        const a3 = () => {
          post({
            url: '/pieceData/DonateRecordAbnormal/getList',
            data: {
              donateRecordId: props.params.data.id,
            },
          }).then(({ data }) => {
            CloumsDDSList.value = data
            DDSVister.value = true
          })
        }
        return {
          a1,
          a2,
          a3,
          taval: tabTtpe.value,
        }
      },
    }
  }
  if (o.key === 'auditState') {
    obj['resizable'] = false
    obj['filter'] = true
    obj['filterParams'] = {
      valueFormatter: function (params) {
        return params.value == '0' ? '未审核' : params.value == '1' ? '已审核' : ''
      },
    }
    obj['sortable'] = false
    obj['lockPosition'] = 'right'
    obj['width'] = 150
    obj['cellRenderer'] = {
      template: `<a-tag color="#45a769" v-if="params.data.auditState==1">{{val}}</a-tag><a-tag color="green" v-else>{{val}}</a-tag>`,
      setup(props: any) {
        let val = ref()
        if (props.params.data.auditState == 0) {
          val.value = '未审核'
        } else {
          val.value = '已审核'
        }
        return {
          val,
        }
      },
    }
  }
  if (o.key === 'autoState') {
    obj['resizable'] = false
    obj['filter'] = true
    obj['filterParams'] = {
      valueFormatter: function (params) {
        return params.value == '0' ? '否' : params.value == '1' ? '是' : ''
      },
    }
    obj['sortable'] = false
    obj['lockPosition'] = 'right'
    obj['width'] = 150
    obj['cellRenderer'] = {
      template: `<a-tag color="#45a769" v-if="params.data.autoState==1">{{val}}</a-tag><a-tag color="green" v-else>{{val}}</a-tag>`,
      setup(props: any) {
        let val = ref()
        if (props.params.data.autoState == 0) {
          val.value = '否'
        } else {
          val.value = '是'
        }
        return {
          val,
        }
      },
    }
  }
  return obj
})

let a = [
  {
    showRowGroup: 'hide_def',
    headerName: '',
    checkboxSelection: true,
    headerCheckboxSelection: true,
    pinned: 'left',
    width: 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    lockPosition: 'left',
  },
]
tc = a.concat(tc)

let tc2s: any[] = tableColumns.map((o: any) => {
  let obj = {
    headerName: o.title,
    field: o.key,
    pinned: o['fixed'],
  }
  if (o.key === 'alites') {
    obj['resizable'] = false
    obj['filter'] = false
    obj['sortable'] = false
    obj['lockPosition'] = 'right'
    obj['width'] = 150
    obj['cellRenderer'] = {
      template: `<a-space>
                <el-button v-if="taval == 1 && params.data.autoState == 1" style="color:#165dff;" link @click="a1" >修改</el-button>
                       <el-button style="color:#165dff;" link @click="a2" >明细</el-button>
                       <el-button style="color:#165dff;" link @click="a3" >疵点明细</el-button>
                </a-space>`,
      setup(props: any) {
        const a1 = () => {
          for (let item in props.params.data) {
            dataForm[item] = props.params.data[item]
          }
          post({
            url: '/pieceData/DonateRecordDetail/getList',
            data: {
              donateRecordId: props.params.data.id,
            },
          }).then(({ data }) => {
            dataListmx.value = data
            setTimeout(() => {
              gridOption2wf?.value.setRowData(data)
            }, 0)
            pageData.showAdd = true
            pageData.sideTitle = '修改乐捐单'
          })
        }
        const a2 = () => {
          for (let item in props.params.data) {
            dataForm[item] = props.params.data[item]
          }
          post({
            url: '/pieceData/DonateRecordDetail/getList',
            data: {
              donateRecordId: props.params.data.id,
            },
          }).then(({ data }) => {
            dataListmx.value = data
            setTimeout(() => {
              gridOption2wfs.value.setRowData(data)
            }, 0)
            pageData.showAdd = true
            pageData.sideTitle = '乐捐单明细'
          })
        }
        const a3 = () => {
          post({
            url: '/pieceData/DonateRecordAbnormal/getList',
            data: {
              donateRecordId: props.params.data.id,
            },
          }).then(({ data }) => {
            CloumsDDSList.value = data
            DDSVister.value = true
          })
        }
        return {
          a1,
          a2,
          a3,
          taval: tabTtpe.value,
        }
      },
    }
  }
  if (o.key === 'auditState') {
    obj['resizable'] = false
    obj['filter'] = true
    obj['filterParams'] = {
      valueFormatter: function (params) {
        return params.value == '0' ? '未审核' : params.value == '1' ? '已审核' : ''
      },
    }
    obj['sortable'] = false
    obj['lockPosition'] = 'right'
    obj['width'] = 150
    obj['cellRenderer'] = {
      template: `<a-tag color="#45a769" v-if="params.data.auditState==1">{{val}}</a-tag><a-tag color="green" v-else>{{val}}</a-tag>`,
      setup(props: any) {
        let val = ref()
        if (props.params.data.auditState == 0) {
          val.value = '未审核'
        } else {
          val.value = '已审核'
        }
        return {
          val,
        }
      },
    }
  }
  if (o.key === 'autoState') {
    obj['resizable'] = false
    obj['filter'] = true
    obj['filterParams'] = {
      valueFormatter: function (params) {
        return params.value == '0' ? '否' : params.value == '1' ? '是' : ''
      },
    }
    obj['sortable'] = false
    obj['lockPosition'] = 'right'
    obj['width'] = 150
    obj['cellRenderer'] = {
      template: `<a-tag color="#45a769" v-if="params.data.autoState==1">{{val}}</a-tag><a-tag color="green" v-else>{{val}}</a-tag>`,
      setup(props: any) {
        let val = ref()
        if (props.params.data.autoState == 0) {
          val.value = '否'
        } else {
          val.value = '是'
        }
        return {
          val,
        }
      },
    }
  }
  return obj
})
tc2s = a.concat(tc2s)

const adds = () => {
  dataListmx.value = []
  if (dataForm.id) {
    delete dataForm.id
  }
  for (let item in dataForm) {
    dataForm[item] = ''
  }
  frimIDandName()
  pageData.showAdd = true
  pageData.sideTitle = '新增乐捐单'
}

const formRef = ref()

const sideOk = () => {
  formRef.value?.validate().then((err) => {
    if (!err) {
      if (pageData.sideTitle == '新增乐捐单') {
        loadings.value = true
        post({
          url: 'pieceData/DonateRecord/insertList',
          data: {
            ...dataForm,
            DonateRecordDetail: dataListmx.value,
          },
        })
          .then(({ code, message }) => {
            if (code == 200) {
              Message.success('成功')
              pageData.showAdd = false
              doRefresh()
            } else {
              Message.error(message)
            }
          })
          .finally(() => {
            loadings.value = false
          })
      } else if (pageData.sideTitle == '修改乐捐单') {
        loadings.value = true
        post({
          url: 'pieceData/DonateRecord/updateList',
          data: {
            ...dataForm,
            DonateRecordDetail: dataListmx.value,
          },
        })
          .then(({ code, message }) => {
            if (code == 200) {
              Message.success('成功')
              pageData.showAdd = false
              doRefresh()
            } else {
              Message.error(message)
            }
          })
          .finally(() => {
            loadings.value = false
          })
      } else {
        pageData.showAdd = false
      }
    }
  })
}

const delSles = () => {
  if (gridOption.value.getSelectedRows().length == 0) {
    Message.error('请勾选数据')
    return false
  }
  Modal.confirm({
    title: '系统提示',
    content: '确认删除选中的数据?',
    onOk: () => {
      post({
        url: 'pieceData/DonateRecord/delete',
        data: gridOption.value.getSelectedRows().map((res: any) => res.id),
      }).then((res: any) => {
        if (res.code == 200) {
          Message.success('删除成功')
          doRefresh()
        } else Message.error(res.message)
      })
    },
  })
}

const auditss = () => {
  if (gridOption.value.getSelectedRows().length == 0) {
    Message.error('请勾选数据')
    return false
  }
  Modal.confirm({
    title: '系统提示',
    content: '确认审核选中的数据?',
    onOk: () => {
      post({
        url: 'pieceData/DonateRecord/setAudit',
        data: gridOption.value.getSelectedRows().map((res: any) => {
          return {
            id: res.id,
            auditState: 1,
          }
        }),
      }).then((res: any) => {
        if (res.code == 200) {
          Message.success('审核成功')
          doRefresh()
        } else Message.error(res.message)
      })
    },
  })
}

const onSelect = (dateString: any) => {
  if (dateString[0]) {
    const d1 = new Date(dateString[0])
    const d2 = new Date(dateString[1])
    if (d1 > d2) {
      dateString.reverse()
    }
  }
  form.beginDate = dateString[0]
  form.endDate = dateString[1]
}
const onClear = () => {
  form.beginDate = ''
  form.endDate = ''
}

let configCascader = ref<{}>({
  corporateWidth: '250px', //公司宽度
  sectorWidth: '250px', //部门宽度
  corporateRquired: false, //公司是否必填
  sectorRquired: false, //部门是否必填
  size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
  corporateName: '公司', //公司label
  cascaderShow: 'sector',
  sectorName: '部门', //部门label
  corporateNameLabelWidth: '80px', //选择公司label宽
  sectorLabelWidth: '80px',
})

const changeCascader = (data: any) => {
  const { corporateId, sectorId, sectorLabel, corporateLabel } = data
  form.companyId = corporateId
  // form.firmName = corporateLabel
  // form.firmGroupId = sectorId
  // form.firmGroupName = sectorLabel
}

const ljlxList: any = ref([])

const ljlxClick = () => {
  post({
    url: 'pieceData/fillDeductType/getList',
    data: {
      deleteState: 0,
    },
  }).then(({ data }) => {
    ljlxList.value = data
  })
}

const dataListmx: any = ref([])
const selectedKeys: any = ref([])

let columnsTable: any = ref([
  {
    title: '员工工号',
    dataIndex: 'userCode',
  },
  {
    title: '员工姓名',
    dataIndex: 'userName',
  },
  {
    title: '部门',
    dataIndex: 'departmentName',
  },
  {
    title: '岗位',
    dataIndex: 'postName',
  },
  {
    title: '乐捐数量',
    dataIndex: 'donateNum',
    slotName: 'donateNum',
  },
  {
    title: '乐捐单价',
    dataIndex: 'donatePrice',
    slotName: 'donatePrice',
  },
  {
    title: '乐捐金额',
    dataIndex: 'donateAmount',
    slotName: 'donateAmount',
  },
])
let tc1: any[] = columnsTable.value.map((o: any) => {
  let obj = {
    headerName: o.title,
    field: o.dataIndex,
    pinned: o['fixed'],
    tooltipField: o.dataIndex,
  }
  if (o.slotName == 'donateNum') {
    obj['resizable'] = false
    obj['filter'] = false
    obj['sortable'] = false

    obj['cellRenderer'] = {
      template: `
      <a-input-number class="bacClass" v-model="params.data.donateNum" :precision="2" @change="a" size="mini"/>`,
      setup(props: any) {
        const a = () => {
          ainNumber(props.params.data)
        }
        return {
          a,
        }
      },
    }
  }
  if (o.slotName == 'donateAmount') {
    obj['resizable'] = false
    obj['filter'] = false
    obj['sortable'] = false

    obj['cellRenderer'] = {
      template: `
      <div>{{
          Number(params.data.donateNum * params.data.donatePrice).toFixed(2) != 'NaN'
          ? Number(params.data.donateNum * params.data.donatePrice).toFixed(2)
          : Number(0).toFixed(2)
        }}</div>`,
      setup(props: any) {
        return {}
      },
    }
  }

  if (o.slotName == 'donatePrice') {
    obj['resizable'] = false
    obj['filter'] = false
    obj['sortable'] = false
    obj['cellRenderer'] = {
      template: `<a-input-number class="bacClass" v-model="params.data.donatePrice" :precision="2" @change="a" size="mini"/>`,
      setup(props: any) {
        const a = () => {
          ainNumber(props.params.data)
        }
        return {
          a,
        }
      },
    }
  }

  return obj
})
tc1 = a.concat(tc1)

let columnsTables: any = ref([
  {
    title: '员工工号',
    dataIndex: 'userCode',
  },
  {
    title: '员工姓名',
    dataIndex: 'userName',
  },
  {
    title: '部门',
    dataIndex: 'departmentName',
  },
  {
    title: '岗位',
    dataIndex: 'postName',
  },
  {
    title: '乐捐数量',
    dataIndex: 'donateNum',
  },
  {
    title: '乐捐单价',
    dataIndex: 'donatePrice',
  },
  {
    title: '乐捐金额',
    dataIndex: 'donateAmount',
  },
  {
    title: '确认状态',
    dataIndex: 'confirmState',
    slotName: 'confirmState',
  },
])

let tc2: any[] = columnsTables.value.map((o: any) => {
  let obj = {
    headerName: o.title,
    field: o.dataIndex,
    pinned: o['fixed'],
    tooltipField: o.dataIndex,
  }
  if (o.slotName == 'confirmState') {
    obj['resizable'] = false
    obj['filter'] = false
    obj['sortable'] = false

    obj['cellRenderer'] = {
      template: `
      <a-tag color="green" v-if="params.data.confirmState == 0">未确认</a-tag>
        <a-tag color="#45a769" v-else>已确认</a-tag>
      `,
      setup(props: any) {
        return {}
      },
    }
  }
  return obj
})
tc2 = a.concat(tc2)

let columnsTable2: any = ref([
  {
    title: '员工工号',
    dataIndex: 'code',
  },
  {
    title: '员工姓名',
    dataIndex: 'name',
  },
  {
    title: '部门',
    dataIndex: 'departmentName',
  },
  {
    title: '岗位',
    dataIndex: 'postName',
  },
])

let tc3: any[] = columnsTable2.value.map((o: any) => {
  let obj = {
    headerName: o.title,
    field: o.dataIndex,
    pinned: o['fixed'],
    tooltipField: o.dataIndex,
  }
  return obj
})
tc3 = a.concat(tc3)

const visible = ref(false)

const handleOk = () => {
  if (gridOption2wfss.value.getSelectedRows().length < 1) {
    Message.error('请勾选数据')
    return
  }
  for (let i = 0; i < gridOption2wfss.value.getSelectedRows().length; i++) {
    let res = gridOption2wfss.value.getSelectedRows().map((res) => res.id)[i]
    if (dataListmx.value.length >= 1) {
      if (dataListmx.value.map(({ userId }) => userId).includes(res)) {
        Message.error('请勿勾选相同员工')
        return
      }
    }
  }
  dataListmx2.value.forEach((res: any) => {
    if (
      gridOption2wfss.value
        .getSelectedRows()
        .map((res) => res.id)
        .includes(res.id)
    ) {
      dataListmx.value.push({
        userId: res.id,
        userCode: res.code,
        userName: res.name,
        departmentId: res.departmentId,
        departmentName: res.departmentName,
        postId: res.postId,
        postName: res.postName,
      })
    }
  })
  setTimeout(() => {
    gridOption2wf.value.setRowData(dataListmx.value)
  }, 0)
  visible.value = false
}

const frimIDandName = () => {
  post({
    url: 'admin/acl/user/findUserToken',
    data: {},
  }).then(({ data }) => {
    nextTick(() => {
      dataForm.companyId = data.data.firmId
      dataForm.companyName = data.data.firmName
    })
  })
}

const selectedKeys2: any = ref([])
const dataListmx2: any = ref([])

const xzClicks = () => {
  form.cascaderId = null
  options.value = []
  dataListmx2.value = []
  selectedKeys2.value = []
  visible.value = true
}

const mxDelet = () => {
  if (gridOption2wf.value.getSelectedRows().length < 1) {
    Message.error('请勾选要删除的数据')
    return
  }
  dataListmx.value = dataListmx.value.filter(function (o: any) {
    return (
      gridOption2wf.value
        .getSelectedRows()
        .map((res) => res.userId)
        .indexOf(o['userId']) === -1
    )
  })
}

const options: any = ref()

// const cascaderId: any = ref()
const cascaderName: any = ref()
const cascaders: any = ref()

const bmClick = () => {
  post({
    url: `org/baCompany/getDepartmentTree?companyId=${dataForm.companyId}`,
  }).then(({ data }) => {
    options.value = data
  })
}

watch(
  () => form.cascaderId,
  () => {
    nextTick(() => {
      cascaderName.value = slicing(cascaders?.value?.selectViewValue[0]?.label)
    })
  }
)

const formRef2 = ref()
const mxSelect = () => {
  formRef2.value?.validate().then((err:any) => {
    if (!err) {
      post({
        url: 'org/hrEmployee/getUserAndSecondment',
        data: {
          department_id: Number(form.cascaderId),
          workTime: dayjs().format('YYYY-MM-DD'),
        },
      }).then(({ data }) => {
        dataListmx2.value = data
      })
    }
  })
}

const ainNumber = (record: any) => {
  record.donateAmount = Number(
    Number(record.donateNum * record.donatePrice).toFixed(2) != 'NaN'
      ? Number(record.donateNum * record.donatePrice).toFixed(2)
      : Number(0).toFixed(2)
  )
}

const tableCloumsDDS = [
  {
    headerName: '员工编号',
    field: 'userCode',
  },
  {
    headerName: '员工名称',
    field: 'userName',
  },
  {
    headerName: '症点名称',
    field: 'defectName',
  },
  {
    headerName: '疵点个数',
    field: 'defectNumber',
  },
  {
    headerName: '疵点位置',
    field: 'defectPlace',
  },
  {
    headerName: '扣米数',
    field: 'buttonMeterNum',
  },
  {
    headerName: '扣分数',
    field: 'buttonMinuteNum',
  },
]

const CloumsDDSList = ref([])

const DDSVister = ref(false)
</script>
<style lang="less" scoped>
:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}

:deep(.arco-table-td-content) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
